<template>
  <div>
    <group>
      <calendar v-model="demo1" :title="'Basic Usage'" disable-past placeholder="placeholder" @on-show="log('show')" @on-hide="log('hide')"></calendar>
    </group>
  </div>
</template>



<script>
import { Group, Calendar, Cell, Badge, CellBox } from 'vux'

export default {
  components: {
    Calendar,
    Group,
    Cell,
    Badge,
    CellBox
  },
  data () {
    return {
      demo1: '',
      demo2: 'TODAY',
      demo3: 'TODAY',
      demo4: 'TODAY',
      demo5: [],
      demo6: [],
      displayFormat (value, type) {
        if (type === 'string') {
          return value
        } else {
          return value.length ? (value.length + ' days') : ''
        }
      }
    }
  },
  methods: {
    log (str) {
      console.log(str)
    },
    onChange (val) {
      console.log('on change', val)
    }
  }
}
</script>

<style>
.selected-days {
  color: #999;
  width: 90px;
}
.inline-calendar td > span.vux-calendar-each-date {
  overflow: hidden;
}
</style>
